<template>
  <view class="upload-box">
    <u-upload v-if="!disabled" :uploadText="uploadText" :width="width" :height="height" :fileList="list" multiple :maxCount="maxCount" :previewFullImage="true" @afterRead="fileUpload" @delete="fileDel">
      <!-- <image src="@/static/images/icon-upload-photo.png" :style="{ width, height }" mode="aspectFit"></image> -->
    </u-upload>
    <template v-else>
      <view class="file-box" v-if="list.length > 0">
        <image class="item-img" :style="{ width: width + 'px', height:height+'px' }" :src="item.url" v-for="(item, index) in list" :key="index" @click="previewImage(list, index)"> </image>
      </view>
      <view v-else>暂未上传</view>
    </template>
  </view>
</template>
<script>
import config from "../http/config";
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    maxCount: {
      type: Number,
      default: 1,
    },
    width: {
      type: String,
      default: "120rpx",
    },
    height: {
      type: String,
      default: "120rpx",
    },
    defaultList: {
      type: Array,
      default: () => [],
    },
    prefix: {
      type: String,
      default: config.baseURL,
    },
    uploadText: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      list: [],
      uploadFiles: [],
    };
  },
  watch: {
    defaultList: {
      handler(n) {
        if (n.length) {
          this.list = (n || []).map((v) => {
            return {
              url: v,
            };
          });
          this.uploadFiles = this.uploadFiles.concat(n.map((v) => v.url));
        }
      },
      immediate: true,
    },
  },
  methods: {
    async fileUpload(e) {
      // this.list = this.list.concat(
      //   e.file.map((v) => ({
      //     url: v.url,
      //   }))
      // );
      // const res = await this.$api.upload(e.file);
      // console.log(res);
      // this.uploadFiles = this.uploadFiles.concat(res);
      // this.$emit("change", this.uploadFiles);
      uni.uploadFile({
        url: config.baseURL + "/file/upload",
        filePath: e.file[0].url || "",
        name: "file",
        formData: {},
        headers: { "Content-Type": "multipart/form-data" },
        success: (uploadFileRes) => {
          if (uploadFileRes && uploadFileRes.errMsg == "uploadFile:ok") {
            let picData =
              uploadFileRes && uploadFileRes.data
                ? JSON.parse(uploadFileRes.data) || {}
                : {};
            if (picData.code === 0) {
              this.list.push({ url: picData.data.url });
              this.$emit("change", picData.data.url);
            } else {
              uni.showToast({
                icon: "none",
                title: picData.data.msg || "文件上传失败，请重试",
              });
            }
          }
        },
        fail: (err) => {
          console.log("图片上传接口调用失败", err);
        },
      });
    },
    fileDel(e) {
      this.list.splice(e.index, 1);
      this.uploadFiles.splice(e.index, 1);
      this.$emit("change", this.uploadFiles);
    },
    previewImage(urls, index) {
      uni.previewImage({
        current: index || 0,
        urls: urls.map((v) => v.url),
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-box {
  .file-box {
    display: flex;
    flex-wrap: wrap;
    .item-img {
      margin-right: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>
